<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p>商家列表</p>
    </header>
    <!-- 商家列表部分 -->
    <ul class="business">
      <li
        v-for="item in businessArr"
        :key="item.businessId"
        @click="toBusinessInfo(item.businessId)"
      >
        <div class="business-img">
          <img :src="item.businessImg" />
          <div class="business-img-quantity" v-show="item.quantity > 0">
            {{ item.quantity }}
          </div>
        </div>
        <div class="business-info">
          <h3>{{ item.businessName }}</h3>
          <p>
            &#165;{{ item.starPrice }}起送 | &#165;{{ item.deliveryPrice }}配送
          </p>
          <p>{{ item.businessExplain }}</p>
        </div>
      </li>
    </ul>
    <!-- 底部菜单部分 -->
    <Footer></Footer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Footer from '../components/Footer.vue';
import backButton from '../components/backButton.vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';

const route = useRoute();
const router = useRouter();
const businessArr = ref([]);
const user = ref({});
const orderTypeId = ref(route.query.orderTypeId);

const fetchBusinessList = async () => {
  if (orderTypeId.value == null) {
    console.log(businessArr.value);
  } else {
    try {
      const response = await axios.get(`/businesses/orderType/${orderTypeId.value}`);
      businessArr.value = response.data.data;
      // 判断是否登录
      if (user.value != null) {
        listCart();
      }
    } catch (error) {
      console.error(error);
    }
  }
};

const listCart = async () => {
  try {
    const response = await axios.get(`/carts?userId=${user.value.userId}`);
    let cartArr = response.data.data;
    // 遍历所有食品列表
    for (let businessItem of businessArr.value) {
      businessItem.quantity = 0;
      for (let cartItem of cartArr) {
        if (cartItem.businessId === businessItem.businessId) {
          businessItem.quantity += cartItem.quantity;
        }
      }
    }
    businessArr.value.sort();
  } catch (error) {
    console.error(error);
  }
};

const toBusinessInfo = (businessId) => {
  router.push({
    path: '/businessInfo',
    query: {
      businessId: businessId,
    },
  });
};

onMounted(async () => {
  user.value = sessionStorage.getItem('user') ? JSON.parse(sessionStorage.getItem('user')) : {};
  await fetchBusinessList();
});
</script>

<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
}
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper .business {
  width: 100%;
  margin-top: 12vw;
  padding-bottom: 14vw;
}
.wrapper .business li {
  width: 100%;
  box-sizing: border-box;
  padding: 2.5vw;
  border-bottom: solid 1px #ddd;
  user-select: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.wrapper .business li .business-img {
  position: relative;
}
.wrapper .business li .business-img img {
  width: 20vw;
  height: 20vw;
  border-radius: 10px;
}
.wrapper .business li .business-img .business-img-quantity {
  width: 5vw;
  height: 5vw;
  background-color: red;
  color: #fff;
  font-size: 3.6vw;
  border-radius: 2.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: -1.5vw;
  top: -1.5vw;
}
.wrapper .business li .business-info {
  margin-left: 3vw;
}
.wrapper .business li .business-info h3 {
  font-size: 3.8vw;
  color: #555;
}
.wrapper .business li .business-info p {
  font-size: 3vw;
  color: #888;
  margin-top: 2vw;
}
</style>
